﻿<!DOCTYPE html>
<html> 
<head>
<meta charset="utf-8" />
<title>Rain CSS > HTML5 Tags</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0"/>
<!-- Framework CSS -->
<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="all"/>
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"/> 
<!--[if lte IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]--> 
<link rel="stylesheet" href="css/rain.css" type="text/css" media="all"/>
<!--[if lt IE 9]><script type="text/javascript" src="js/html5.js"></script><![endif]-->
</head>
<body class="body">
<header>
	<div class="header headerBlue">
  	<nav class="lsn posr clearfix">
    	<a href="http://www.webdevelopmentmachine.com" class="headerLink headerLinkBlue l pr pl ib tdn">首页home</a>
    	<a href="http://www.webdevelopmentmachine.com/blog" class="headerLink headerLinkBlue l pr pl ib tdn">博客blog</a>
    	<a href="http://www.webdevelopmentmachine.com/demo/game.html" class="headerLink headerLinkBlue l pr pl ib tdn">游戏game</a>
    </nav>
  </div>
	<div class="headerM headerGrey">
  	<div class="container posr">
    	<div class="l"><a class="tdn block ptll fsxxl" href="index.html">Rain CSS</a></div>
    </div>
  </div>
</header> 
	<div class="container mt"> 
    <div class="content">
    	<div class="sidebar l posr"> 
        <aside class="sidebox">
          <h2 class="category">Use HTML5 tags Build Web Page</h2>
        </aside>        
      </div>
      
      <div class="main mainRight posr">
      	<article class="entry mainBox">
        	<header> 
          <h1 class="entryTitle">The HTML5 Tags Example</h1>
          <p><a href="#">ran</a> 发表于<time pubdate datetime="2009-10-09 14:28">2009-10-09 14:28</time>,分类:<a href="#">A</a>, Tips, <a href="#comments">6条评论 »</a>,10次阅读</p>
          </header>
          <p>This Page use all new html 5 tags </p> 
          <ul>
            <li><a href="http://dev.w3.org/html5/spec/Overview.html#the-article-element">&lt;article&gt;</a></li>
            <li><a href="http://dev.w3.org/html5/spec/Overview.html#the-aside-element">&lt;aside&gt;</a></li>
            <li><a href="http://dev.w3.org/html5/spec/Overview.html#the-audio-element">&lt;audio&gt;</a>
            <br/>
            <audio controls>
                <source src="little_comfort.mp3" />
                <source src="little_comfort.ogg" />
            </audio>
            </li>
            <li><a href="http://dev.w3.org/html5/spec/Overview.html#the-bdi-element">&lt;bdi&gt;</a>
            <br/>
            <p><bdi>Aroma</bdi> - 3 reviews</p>
            <p><bdi>PURPLE PIZZA</bdi> - 5 reviews</p>
            </li>
            <li><a href="http://dev.w3.org/html5/spec/Overview.html#the-canvas-element">&lt;canvas&gt;</a></li>
            <li><a href="http://dev.w3.org/html5/spec/Overview.html#the-command-element">&lt;command&gt;</a>
            <br/>
            <menu>
            <command type="command">Click Me!</command>
            </menu>

            </li>
            <li><a href="http://dev.w3.org/html5/spec/Overview.html#the-datalist-element">&lt;datalist&gt;</a>
            <br/>
            <input id="myCar" list="cars" />
            <datalist id="cars">
              <option value="BMW">
              <option value="Ford">
              <option value="Volvo">
            </datalist>

            </li>
            <li><a href="http://dev.w3.org/html5/spec/Overview.html#the-details-element">&lt;details&gt;</a>
            <br/>
            <section class="progress window">
             <h3>Copying "Really Achieving Your Childhood Dreams"</h3>
             <details>
              <summary>Copying... <progress max="375505392" value="97543282"></progress> 25%</summary>
              <dl>
               <dt>Transfer rate:</dt> <dd>452KB/s</dd>
               <dt>Local filename:</dt> <dd>/home/rpausch/raycd.m4v</dd> 
              </dl>
             </details>
            </section>
            </li>
            <li><a href="http://dev.w3.org/html5/spec/Overview.html#the-embed-element">&lt;embed&gt;</a>
            </li>
            <li><a href="http://dev.w3.org/html5/spec/Overview.html#the-figcaption-element">&lt;figcaption&gt;</a>
            <br/>
						<figure>
              <figcaption>Figcaption</figcaption>
              <p>The figcaption element represents a caption or legend for the rest of the contents of the figcaption element's parent figure element</p>
            </figure></li>
            <li><a href="http://dev.w3.org/html5/spec/Overview.html#the-figure-element">&lt;figure&gt;</a></li>
            <li><a href="http://dev.w3.org/html5/spec/Overview.html#the-footer-element">&lt;footer&gt;</a></li>
            <li><a href="http://dev.w3.org/html5/spec/Overview.html#the-header-element">&lt;header&gt;</a></li>
            <li><a href="http://dev.w3.org/html5/spec/Overview.html#the-hgroup-element">&lt;hgroup&gt;</a>
            <br/>
            <hgroup>
             <h3>The reality dysfunction</h3>
             <h4>Space is not the only void</h4>
            </hgroup>
            </li>
            <li><a href="http://dev.w3.org/html5/spec/Overview.html#the-keygen-element">&lt;keygen&gt;</a>
            <br/>
            <form action="#" method="post" enctype="multipart/form-data">
             <p><keygen name="key"></p>
             <p><input type="submit" value="Submit key"></p>
            </form>
            </li>
            <li><a href="http://dev.w3.org/html5/spec/Overview.html#the-mark-element">&lt;mark&gt;</a>
            <br/>
            <p>Look around and you will find, no-one's really <mark>colour</mark> blind.</p>            
            </li>
            <li><a href="http://dev.w3.org/html5/spec/Overview.html#the-meter-element">&lt;meter&gt;</a>
            <br/> 
            Tickets sold: <meter min="0" max="100" value="75"></meter>            
            </li>
            <li><a href="http://dev.w3.org/html5/spec/Overview.html#the-nav-element">&lt;nav&gt;</a>
            </li>
            <li><a href="http://dev.w3.org/html5/spec/Overview.html#the-output-element">&lt;output&gt;</a>
            <br/>
            <form onSubmit="return false" oninput="o.value = a.valueAsNumber + b.valueAsNumber">
             <input name=a type=number step=any> +
             <input name=b type=number step=any> =
             <output name=o></output>
            </form>
            </li>
            <li><a href="http://dev.w3.org/html5/spec/Overview.html#the-progress-element">&lt;progress&gt;</a>
            <br/>
            Progress: <progress id="Progress" max="100" value="80"></progress>
            </li>
            <li><a href="http://dev.w3.org/html5/spec/Overview.html#the-rp-element">&lt;rp&gt;</a></li>
            <br/>
            <ruby>
             漢 <rp>(</rp><rt>かん</rt><rp>)</rp>
             字 <rp>(</rp><rt>じ</rt><rp>)</rp>
            </ruby>
            <li><a href="http://dev.w3.org/html5/spec/Overview.html#the-rt-element">&lt;rt&gt;</a></li>
            <li><a href="http://dev.w3.org/html5/spec/Overview.html#the-ruby-element">&lt;ruby&gt;</a></li>
            <br/>
            <ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby><br/>
            <ruby>漢<rt>ㄏㄢˋ</rt>字<rt>ㄗˋ</rt></ruby><br/>
            <ruby>汉<rt>hàn</rt>字<rt>zì</rt></ruby>
            <li><a href="http://dev.w3.org/html5/spec/Overview.html#the-section-element">&lt;section&gt;</a></li>
            <li><a href="http://dev.w3.org/html5/spec/Overview.html#the-source-element">&lt;source&gt;</a></li>
            <li><a href="http://dev.w3.org/html5/spec/Overview.html#the-summary-element">&lt;summary&gt;</a>
            <br/>
            <details>
            <summary>HTML5</summary> This document teaches you everything you have to learn about HTML 5.
            </details>
            </li>
            <li><a href="http://dev.w3.org/html5/spec/Overview.html#the-time-element">&lt;time&gt;</a>
            <br/>
            <time  datetime="2007-10-05">October 5</time> - <time datetime="2007-10-20">19</time>
            </li>
            <li><a href="http://dev.w3.org/html5/spec/Overview.html#the-track-element">&lt;track&gt;</a></li>
            <li><a href="http://dev.w3.org/html5/spec/Overview.html#the-video-element">&lt;video&gt;</a>
            <br/>
            <video width="320" height="240" controls="controls">
              <source src="TheSaltwaterRoom.mp4" type="video/mp4" />
              <track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
              <track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">
            </video>
            </li> 
          </ul> 
        </article>
      </div>
    <footer class="footer socialFooter c borderTop">
        <address class="bottom">
        For more details, contact<a href="mailto:js@example.com">Rain Zhai</a>.
        </address>
      <p class="bottom pt pb">Copyright 2010-2015 Web Development Machine.</p>
    </footer>  
    </div>
  </div>
</body>
</html>
